<template>
  <div class="list">
    <div class="list-half" v-for="(v, k) in cloumns" :key="'cloumns' + v">
      <div
        class="item"
        v-for="(item, index) in data.filter((s, j) => j % cloumns == k)"
        :key="index"
      >
        <img class="card" :src="baseApi + v.ThumbnailsFileUrl" />
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
} from "vue";
export default defineComponent({
  name: "layout",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    data2: {
      type: Array,
      default: () => [],
    },
    cloumns: {
      type: Number,
      default: 3,
    },
  },
  setup(props) {
    // const listData = props.data
    return {
      //   listData,
    };
  },
});
</script>
<style scoped lang="scss">
.list {
  padding: 20px;
  display: flex;
  justify-content: space-around;
}
.list .list-half {
  height: 100%;
  margin-right: 20px;
  &:last-child {
    margin-right: 0;
  }
  box-sizing: border-box;
}
.list-half .card {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  width: 100%;
  height: 100%;
}
</style>
